﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html ng-app="myApp" >
<head ng-controller="secondController">
    <meta name="viewport" content="width=device-width" />
    <title ng-bind-template="{{title}}"></title>
    <script src="~/Scripts/angular.min.js"></script>
    <style type="text/css">
        .red {
            color: red;
        }

        .green {
            color: green;
        }

        .list {
            border: 1px solid #ccc;
            width: 100%;
        }

            .list td {
                border: 1px solid #ccc;
            }

        .odd {
            color: red;
        }

        .even {
            color: blue;
        }
    </style>
</head>
<body>
    <div ng-controller="firstController">
        <div>
            <h1>{{title}}</h1>
            <h1>联动、数据绑定</h1>
            名:<input type="text" ng-model="firstName" />
            姓：<input type="text" ng-model="lastName" />
            <br />
            姓名:{{firstName + lastName}}
            <br />
            姓名测试：<p ng-bind-template="Google Phone Gallery: {{firstName}}"></p>
            <br />
            用户ID：{{User.Id}}<br />
            用户姓名：{{User.Name}}
            <br />
            <hr />
            <h1>测试点击事件、获取数据、数据绑定、搜索过滤、排序</h1>
            <input type="button" ng-click="getList()" value="获取数据" />
            <br />
            Key:<input type="text" ng-model="key" />
            <table class="list">
                <tr>
                    <th style="width:auto">序号</th>
                    <th style="width:auto">ID</th>
                    <th style="width:auto">姓名</th>
                    <th style="width:auto">Age</th>
                    <th style="width:auto">操作</th>
                </tr>
                <tbody>
                    <tr ng-repeat="item in Users | filter:key |orderBy:'Id':true" ng-class="item.Id>10003?'red':'green'">
                        <td>{{ $index + 1 }}</td>
                        <td ng-bind-template="{{item.Id}}"></td>
                        <td ng-bind-template="{{item.Name}}"></td>
                        <td ng-bind-template="{{item.Age}}">></td>
                        <td>
                            <a href="javascript:" ng-hide="item.Id==10005" ng-click="doDelete(item.Id)">删除</a>
                            <a href="javascript:" ng-show="item.Id==10003" ng-click="doUpdate(item.Id)">修改</a>
                            <a href="javascript:" ng-if="item.Id==10002" ng-click="doDetail(item.Id)">详情</a>
                        </td>
                    </tr>
                </tbody>
            </table>
            <hr />
            <h1>input[checkbox]双选框</h1>
            Value1: <input type="checkbox" ng-model="value1"> <br />
            Value2: <input type="checkbox" ng-model="value2"
                           ng-true-value="'YES'" ng-false-value="'NO'"> <br />
            <p>value1 = {{value1}}</p><br />
            <p>value2 = {{value2}}</p><br />
            <h1>日期</h1>
            Pick a date in 2015:
            <input type="date" id="exampleInput" name="input" ng-model="value"
                   placeholder="yyyy-MM-dd" min="2015-01-01" max="2015-12-31" required />
            <span class="error" ng-show="dateForm.input.$error.required">
                Required!
            </span>
            <span class="error" ng-show="dateForm.input.$error.date">
                Not a valid date!
            </span>
            <p>value = {{value}}</p><br />
            <p>value = {{value | date: "yyyy-MM-dd"}}</p><br />
            <p>dateForm.input.$valid = {{dateForm.input.$valid}}</p><br />
            <p>dateForm.input.$error = {{dateForm.input.$error}}</p><br />
            <p>dateForm.$valid = {{dateForm.$valid}}</p><br />
            <p>dateForm.$error.required = {{!!dateForm.$error.required}}</p><br />
            <hr />
            <h1>ng-class-odd/even 分别定义奇数偶数元素的css样式</h1>
            <ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
                <li ng-repeat="name in names">
                    <span ng-class-odd="'odd'" ng-class-even="'even'">
                        {{name}} &nbsp; &nbsp; &nbsp;
                    </span>
                </li>
            </ol>
            <hr />
            <h1> ng-click 单击事件</h1>
            <button ng-click="count = count + 1" ng-init="count=0">
                Increment
            </button>
            <span>
                count: {{count}}
            </span>
            <hr />
            <h1> 是否显示，或隐藏。angularJs根据这两个属性的值，对相应元素增加.ng-hide的样式</h1>
            <span>Click me: </span><input type="checkbox" ng-model="checked"><br />
            <div>
                Show:
                <div style="background-color:#ccc" ng-show="checked">
                    <span> I show up when your checkbox is checked.</span>
                </div>
            </div>
            <div>
                Hide:
                <div style="background-color:#258be3;color:white" ng-hide="checked">
                    <span> I hide when your checkbox is checked.</span>
                </div>
            </div>
            <hr />
            <h1> 下拉列表</h1>
            <select ng-model="orderProp">
                <option value="name">Alphabetical</option>
                <option value="age">Newest</option>
            </select>
            <p ng-bind="orderProp"></p>
            <dl>
                <dt>计算器</dt>
                <dd>数量：<input type="number" ng-model="quantity" /></dd>
                <dd>单价：<input type="number" ng-model="price" /></dd>
                <dd>总价：{{calcAmount()|currency}}</dd>
            </dl>
        </div>
    </div>
    <script>
        var app = angular.module("myApp", []);
        app.controller("secondController", function ($scope, $http, $rootScope) {
            
        });
        app.controller("firstController", function ($scope, $http, $rootScope) {
            $rootScope.title = "firstAngularJs.Demo";
            $scope.firstName = "first果果";
            $scope.lastName = "first啦啦";
            $scope.User = { Id: 10001, Name: "first张三" };
            $scope.Users = [];
            $scope.quantity = 1;
            $scope.price = 5288;

            $scope.calcAmount = function () {
                return $scope.quantity * $scope.price;
            };

            $scope.getList = function () {
                $http.post('@Url.Action("GetList", "Home")', { Id: 10009 }).
                success(function (data) {
                    $scope.Users = data;
                });
            };

            $scope.doDelete = function (id) {
                
                alert("删除" + id);
                for (var index = 0; index < $scope.Users.length; index++) {
                    var user = $scope.Users[index];
                    console.log($scope.Users[index]);
                    if (user.Id == id) {
                        $scope.Users[index] = {};
                    }
                }
                return 1;
            };

            $scope.doUpdate = function (id) {
                return alert("更新" + id);
            };

            $scope.doDetail = function (id) {
                return alert("详情" + id);
            };

            ////http jsonp请求
            //$http({
            //    method: 'jsonp',
            //    url: "/someUrl",
            //    params: {msg:'hello word!'}
            //}).success(function(data, status, headers, config) {
            //
            //}).
            //error(function(data, status, headers, config) {
            //
            //});

        });

    </script>
</body>
</html>
